{% extends "admin/base_site.html" %}
{% load i18n static %}

{% block title %}数据报表 | {{ site_title|default:_('Django site admin') }}{% endblock %}

{% block content %}
<div class="reports-container">
    <h1 style="color: #417690; margin-bottom: 30px;">📊 数据报表中心</h1>

    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px;">
        <!-- 用户统计 -->
        <div class="report-card" style="background: white; padding: 25px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-left: 5px solid #007bff;">
            <h3 style="color: #007bff; margin-bottom: 20px;">👥 用户统计</h3>
            <div class="report-stats">
                <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                    <span>总用户数:</span>
                    <strong style="color: #007bff;">{{ user_stats.total_users|default:0 }}</strong>
                </div>
                <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                    <span>VIP用户:</span>
                    <strong style="color: #28a745;">{{ user_stats.vip_users|default:0 }}</strong>
                </div>
                <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                    <span>活跃用户:</span>
                    <strong style="color: #17a2b8;">{{ user_stats.active_users|default:0 }}</strong>
                </div>
                <div style="display: flex; justify-content: space-between;">
                    <span>本月新增:</span>
                    <strong style="color: #ffc107;">{{ user_stats.new_users_this_month|default:0 }}</strong>
                </div>
            </div>
        </div>

        <!-- 产品统计 -->
        <div class="report-card" style="background: white; padding: 25px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-left: 5px solid #28a745;">
            <h3 style="color: #28a745; margin-bottom: 20px;">📦 产品统计</h3>
            <div class="report-stats">
                <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                    <span>总产品数:</span>
                    <strong style="color: #28a745;">{{ product_stats.total_products|default:0 }}</strong>
                </div>
                <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                    <span>在售产品:</span>
                    <strong style="color: #007bff;">{{ product_stats.active_products|default:0 }}</strong>
                </div>
                <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                    <span>缺货产品:</span>
                    <strong style="color: #dc3545;">{{ product_stats.out_of_stock|default:0 }}</strong>
                </div>
                <div style="display: flex; justify-content: space-between;">
                    <span>低库存产品:</span>
                    <strong style="color: #ffc107;">{{ product_stats.low_stock|default:0 }}</strong>
                </div>
            </div>
        </div>

        <!-- 订单统计 -->
        <div class="report-card" style="background: white; padding: 25px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-left: 5px solid #ffc107;">
            <h3 style="color: #ffc107; margin-bottom: 20px;">🛒 订单统计</h3>
            <div class="report-stats">
                <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                    <span>总订单数:</span>
                    <strong style="color: #ffc107;">{{ order_stats.total_orders|default:0 }}</strong>
                </div>
                <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                    <span>待处理:</span>
                    <strong style="color: #dc3545;">{{ order_stats.pending_orders|default:0 }}</strong>
                </div>
                <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                    <span>已完成:</span>
                    <strong style="color: #28a745;">{{ order_stats.completed_orders|default:0 }}</strong>
                </div>
                <div style="display: flex; justify-content: space-between;">
                    <span>今日订单:</span>
                    <strong style="color: #007bff;">{{ order_stats.today_orders|default:0 }}</strong>
                </div>
            </div>
        </div>

        <!-- 销售统计 -->
        <div class="report-card" style="background: white; padding: 25px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-left: 5px solid #17a2b8;">
            <h3 style="color: #17a2b8; margin-bottom: 20px;">💰 销售统计</h3>
            <div class="report-stats">
                <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                    <span>总销售额:</span>
                    <strong style="color: #17a2b8;">¥{{ sales_stats.total_sales|default:0 }}</strong>
                </div>
                <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                    <span>本月销售:</span>
                    <strong style="color: #28a745;">¥{{ sales_stats.monthly_sales|default:0 }}</strong>
                </div>
                <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                    <span>平均订单:</span>
                    <strong style="color: #ffc107;">¥{{ sales_stats.avg_order|default:0 }}</strong>
                </div>
                <div style="display: flex; justify-content: space-between;">
                    <span>今日销售:</span>
                    <strong style="color: #007bff;">¥{{ sales_stats.daily_sales|default:0 }}</strong>
                </div>
            </div>
        </div>
    </div>

    <!-- 图表区域 -->
    <div style="margin-top: 40px;">
        <div style="background: white; padding: 30px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
            <h3 style="color: #417690; margin-bottom: 20px;">📈 趋势分析</h3>
            <div style="text-align: center; padding: 60px; color: #6c757d; background: #f8f9fa; border-radius: 8px;">
                <i style="font-size: 48px; margin-bottom: 20px;">📊</i>
                <p style="font-size: 18px; margin: 0;">图表功能待开发</p>
                <p style="margin: 10px 0 0 0;">可以集成 Chart.js 或其他图表库来显示数据趋势</p>
            </div>
        </div>
    </div>

    <!-- 操作按钮 -->
    <div style="margin-top: 30px; text-align: center;">
        <a href="{% url 'admin:index' %}" style="display: inline-block; padding: 12px 24px; background: #007bff; color: white; text-decoration: none; border-radius: 6px; margin: 0 10px;">
            ← 返回主页
        </a>
        <a href="{% url 'super_admin:analytics' %}" style="display: inline-block; padding: 12px 24px; background: #28a745; color: white; text-decoration: none; border-radius: 6px; margin: 0 10px;">
            查看分析 →
        </a>
    </div>
</div>

<style>
.report-card:hover {
    transform: translateY(-5px);
    transition: transform 0.3s ease;
    box-shadow: 0 8px 15px rgba(0,0,0,0.15) !important;
}
</style>
{% endblock %}
